package com.liuchuanzheng.lcz_compose_news

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.layout.Column
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.List
import androidx.compose.material.icons.filled.Place
import androidx.compose.runtime.*
import androidx.compose.runtime.livedata.observeAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewmodel.compose.viewModel
import com.fmt.compose.news.ui.weather.WeatherPage
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.PagerState
import com.google.accompanist.pager.rememberPagerState
import com.liuchuanzheng.lcz_compose_news.ui.info.NewsPage
import com.liuchuanzheng.lcz_compose_news.ui.movie.MoviePage
import com.liuchuanzheng.lcz_compose_news.ui.picture.PicturePage
import com.liuchuanzheng.lcz_compose_news.ui.theme.LCZ_Compose_NewsTheme
import com.liuchuanzheng.lcz_compose_news.viewmodel.MainViewModel
import kotlinx.coroutines.launch


class MainActivity : ComponentActivity() {
    @ExperimentalPagerApi
    @ExperimentalFoundationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LCZ_Compose_NewsTheme {
                Column {
                    val pagerState = rememberPagerState(
                        pageCount = 4,
                        initialPage = 0, initialOffscreenLimit = 3
                    )
                    HorizontalPager(state = pagerState, dragEnabled = false, modifier = Modifier.weight(1f)) { page ->
                        when (page) {
                            0 -> {
                                NewsPage()
                            }
                            1 -> {
                                MoviePage()
                            }
                            2 -> {
                                PicturePage()
                            }
                            3 -> {
                                WeatherPage()
                            }
                            else -> {
                            }
                        }

                    }
                    BottomNavigationAlwaysShowLabelComponent(pagerState = pagerState)

                }
            }
        }
    }
}

val listItems = listOf(
    mApp.getString(R.string.news_tab_title),
    mApp.getString(R.string.video_tab_title),
    mApp.getString(R.string.pic_tab_title),
    mApp.getString(R.string.weather_tab_title)
)

@ExperimentalPagerApi
@Composable
fun BottomNavigationAlwaysShowLabelComponent(pagerState: PagerState) {

    val viewModel:MainViewModel = viewModel()
    val selectedIndex by viewModel.getSelectedIndex().observeAsState(0)
    val scope = rememberCoroutineScope()
    BottomNavigation(backgroundColor = Color.White) {

        listItems.forEachIndexed { index, label ->
            BottomNavigationItem(icon = {
                when (index) {
                    0 -> BottomIcon(Icons.Filled.Home, selectedIndex, index)
                    1 -> BottomIcon(Icons.Filled.List, selectedIndex, index)
                    2 -> BottomIcon(Icons.Filled.Favorite, selectedIndex, index)
                    3 -> BottomIcon(Icons.Filled.Place, selectedIndex, index)
                }
            }, label = {
                Text(label, color = if (selectedIndex == index) MaterialTheme.colors.primary else Color.Gray)
            }, selected = selectedIndex == index, onClick = {
                viewModel.saveSelectIndex(index)
                scope.launch {
                    pagerState.scrollToPage(index)
                }
            })
        }
    }
}

@Composable
fun BottomIcon(imageVector: ImageVector, selectedIndex: Int, index: Int) {
    Icon(
        imageVector, contentDescription = null,
        tint = if (selectedIndex == index) MaterialTheme.colors.primary else Color.Gray
    )
}
